<%--
  Created by IntelliJ IDEA.
  User: 86176
  Date: 2020/4/24
  Time: 14:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>jquery的ajax处理</title>
    <%--    使用jquery之前一定要先把jquery的库文件使用script标签引入--%>
    <script type="text/javascript" src="jquery-1.12.4/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        // ajax请求处理函数
        function doAjax() {
            console.log("正准备执行ajax请求");

            // 获取form表单中的输入框控件的值
            var userName = document.getElementById("userName").value; // document.getElementById("") 方法获取指定id的控件对象
            // jquery进行ajax的get请求
            $.ajax({
                type: "GET", // 指明request请求类型为get请求
                url: "AjaxDemoServlet?userName=" + userName, // 请求的url，form表单的action属性的值
                dataType: "text", // 指明服务器发回的响应内容的格式
                success: function(data){ // ajax引擎执行成功之后的回调函数处理【符合条件：xmlhttp.readyState == 4 && xmlhttp.status == 200】
                    // 局部刷新浏览器：使用js操作页面标签对象进行显示【dom操作】
                    //document.getElementById("showMsg").innerHTML = data;
                    $("#showMsg").html(data);
                }
            });

            // 简化版
            // $.get("AjaxDemoServlet?userName=" + userName, function(data){
            //     $("#showMsg").html(data);
            // });
        }

        /////////////////////////////////////////////////////////////////////////
        // ajax请求处理函数
        function doAjax_post() {
            console.log("正准备执行ajax请求");

            // 获取form表单中的输入框控件的值
            var userName = document.getElementById("userName").value; // document.getElementById("") 方法获取指定id的控件对象
            // jquery进行ajax的get请求
            $.ajax({
                type: "post", // 指明request请求类型为post请求
                url: "AjaxDemoServlet", // 请求的url，form表单的action属性的值
                data: "userName="+ userName,// 客户端浏览器发送给服务器端的数据
                dataType: "text", // 指明服务器发回的响应内容的格式
                success: function(data){ // ajax引擎执行成功之后的回调函数处理【符合条件：xmlhttp.readyState == 4 && xmlhttp.status == 200】
                    // 局部刷新浏览器：使用js操作页面标签对象进行显示【dom操作】
                    //document.getElementById("showMsg").innerHTML = data;
                    $("#showMsg").html(data);
                }
            });

            // 简写形式
            // $.post("test.php", { name: "John", time: "2pm" },
            //     function(data){
            //         alert("Data Loaded: " + data);
            //     });
        }
    </script>
</head>
<body>
<form>
    用户名：<input type="text" id="userName" name="userName">
    会掉结果：<label id="showMsg"></label>
    <input type="button" value="ajaxDemo" onclick="doAjax()">
    <input type="button" value="ajaxDemo_Post" onclick="doAjax_post()">
</form>
</body>
</html>